<template>
  <el-form class="form" ref="form" :model="form" :rules="rules" label-width="160px" size="small">
    <el-row>
      <el-col :span="10" :offset="7">
        <el-form-item label="当前用户">{{ $store.getters['user/accountInfo'].phone }}</el-form-item>
        <el-form-item label="认证状态">
          <div class="text" :class="[status == 3 || status == 5 ? 'error' : '']">
            {{ status_text }}
          </div>
        </el-form-item>
        <el-form-item label="机构名称" prop="title">
          <el-input
            v-model="form.title"
            class="inupt-width"
            :minlength="1"
            :maxlength="50"
            :showWordLimit="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构所属分类(行业)" prop="category">
          <el-cascader
            class="inupt-width"
            v-model="form.category"
            :props="categoryProps"
            :options="category"
            :show-all-levels="false"
            collapse-tags
          ></el-cascader>
        </el-form-item>
        <el-form-item label="LOGO" prop="logo">
          <edu-upload :args="argsAvatar" :value.sync="form.logo"></edu-upload>
        </el-form-item>
        <el-form-item label="机构简介" prop="intro">
          <el-input
            class="inupt-width"
            v-model="form.intro"
            :minlength="1"
            :maxlength="800"
            :showWordLimit="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <el-input class="inupt-width" v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
          <el-input class="inupt-width" type="textarea" v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号" prop="legal_IDcard">
          <el-input
            class="inupt-width"
            v-model="form.legal_IDcard"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证正面" prop="legal_IDcard_positive">
          <edu-upload :args="argsCard" :value.sync="form.legal_IDcard_positive"></edu-upload>
        </el-form-item>
        <el-form-item label="身份证反面" prop="legal_IDcard_side">
          <edu-upload :args="argsCard" :value.sync="form.legal_IDcard_side"></edu-upload>
        </el-form-item>
        <el-form-item label="营业执照" prop="business_license">
          <edu-upload :args="argsLicense" :value.sync="form.business_license"></edu-upload>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
          <el-link type="primary" :underline="false" @click="handleKeyword('schoolUser')"
            >《{{ getAgreementTitle('schoolUser') }}》</el-link
          >
        </el-form-item>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row type="flex" justify="center">
      <el-button class="btn" size="small" type="primary" @click="submitForm('form')"
        >提交</el-button
      >
    </el-row>
  </el-form>
</template>

<script>
import EduUpload from '@/components/EduUpload'
import { mapGetters } from 'vuex'
export default {
  props: ['category', 'status', 'status_text'],
  components: {
    EduUpload
  },
  inject: ['reload'],
  data() {
    // 手机号码的校验
    var testPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!this.$util.mobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    // 上传文件
    var checkCard = (rule, value, callback) => {
      if (value == 0) {
        callback(new Error('请选择上传文件'))
      } else {
        callback()
      }
    }
    // 身份证
    var checkIDcard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证号'))
      } else {
        if (!this.$util.idCard(value)) {
          callback(new Error('身份证号输入错误'))
        } else {
          callback()
        }
      }
    }
    return {
      argsAvatar: {
        upload_type: 'avatar'
      },
      argsCard: {
        limit: 1,
        upload_type: 'pictureList',
        placeholder: ''
      },
      argsLicense: {
        limit: 1,
        upload_type: 'pictureList',
        placeholder: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入机构名称',
            trigger: 'blur'
          }
        ],
        category: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个机构分类',
            trigger: 'change'
          }
        ],
        logo: [{ required: true, validator: checkCard, trigger: 'blur' }],
        intro: [
          {
            required: true,
            message: '请输入机构简要说明',
            trigger: 'blur'
          }
        ],
        telephone: [{ required: true, validator: testPhone, trigger: 'blur' }],
        address: [
          {
            required: true,
            message: '请输入联系地址',
            trigger: 'blur'
          }
        ],
        legal_IDcard: [{ required: true, validator: checkIDcard, trigger: 'blur' }],
        legal_IDcard_positive: [{ required: true, validator: checkCard, trigger: 'blur' }],
        legal_IDcard_side: [{ required: true, validator: checkCard, trigger: 'blur' }],
        business_license: [{ required: true, validator: checkCard, trigger: 'blur' }]
      },
      categoryProps: {
        multiple: true,
        value: 'id',
        label: 'title',
        children: 'child'
      },
      checked: true,
      form: {
        title: '', // 机构名称
        category: [], // 机构所属分类
        logo: 0, // logo附件ID
        intro: '', // 机构简要说明
        telephone: '', // 联系电话
        address: '', // 联系地址
        legal_IDcard: '', // 法人身份证号
        legal_IDcard_positive: 0, // 法人身份证正面照附件ID
        legal_IDcard_side: 0, // 法人身份证背面照附件ID
        business_license: 0 // 营业执照附件ID
      }
    }
  },
  computed: {
    ...mapGetters({
      getAgreementTitle: 'projectSetting/getAgreementTitle'
    })
  },
  methods: {
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.checked) {
            this.$api.createSchoolAuth(
              {
                ...this.form
              },
              res => {
                this.$message.success(res.msg, res => {
                  this.reload()
                })
              },
              err => {
                console.log(err)
                this.$message.error(err.msg)
              }
            )
          } else {
            this.$message.warning('阅读并同意' + this.getAgreementTitle('schoolUser'))
          }
        }
      })
    },
    handleKeyword(key) {
      this.$router.push({
        path: '/agreement/' + key
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  background-color: #fff;
  padding: 30px 0;
  ::v-deep .avatar-uploader {
    .el-upload,
    .avatar,
    .avatar-uploader-icon {
      display: block;
      width: 110px;
      height: 110px;
    }
    .el-upload .avatar-uploader-icon {
      line-height: 110px;
    }
  }
  .inupt-width {
    width: 220px;
  }
  .btn {
    padding-left: 30px;
    padding-right: 30px;
  }
  .text {
    font-size: 13px;
    color: $text-color-import;
  }
  .error {
    font-size: 13px;
    color: $text-color-error;
  }
}
</style>
